<template>
    <view class="gift">
        <view class="load" v-if="!load">
            <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
        </view>
        <block v-else>
            <view class="topBox">
                <view class="head1">
                    <view class="searchBox">
                        <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721975652195245.png" mode="">
                        </image>
                        <input type="text" v-model="searchValue" @input="searchCustomers" placeholder="请输入搜索内容" />
                        <!-- <button style="width: 50rpx; height: 30rpx; background-color: #000;"></button> -->
                    </view>
                </view>
                <view class="topList">
                    <block v-for="(item, index) in tabList" :key="index">
                        <view class="topCell" :class="item.value == nowIndex ? 'topCellIng' : ''"
                            @click="chooseTab(item.value)">
                            {{ item.label }}
                            <view class="unReadNum" v-if="item.count">{{ item.count }}</view>
                        </view>
                    </block>
                </view>
                <view class="navBox">
                    <view class="sign_nav">
                        <view class="nav_cell" @click="exportFile()">
                            <view class="icon">
                                <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17231128405741313.png"
                                    mode="aspectFill"></image>
                            </view>
                            <view class="tit">
                                导出订单
                            </view>
                        </view>
                        <!-- <block v-if="nowIndex == 1">
                            <view class="nav_line"></view>
                            <view class="nav_cell" @click="importFile()">
                                <view class="icon">
                                    <image
                                        src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1723113357296396.png"
                                        mode="aspectFill"></image>
                                </view>
                                <view class="tit">
                                    导入物流单号
                                </view>
                            </view>
                        </block> -->

                    </view>
                </view>
            </view>
            <view style="height: 300rpx;"></view>

            <block v-if="orderList.length > 0">
                <view class="item" v-for="(item, index) in orderList" :key="index"
                    @click="nav_to(`/pages/store/orderDetail?id=${item.ID}`)">
                    <view class="single">
                        <view class="single_titbox">
                            <view class="titbox_tit">
                                订单号：{{ item.OrderNo || '--' }}
                            </view>
                            <view class="titbox_status">
                                {{ getStoreStatus(item.Status) }}
                            </view>
                        </view>
                        <view class="address">
                            <view class="address_cell">
                                <view class="icon">
                                    <image
                                        src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1723104520140211.png"
                                        mode="aspectFill"></image>
                                </view>
                                <view class="name">
                                    {{ item.Delivery_Accepter || '--' }}{{ ' ' }}{{ item.Delivery_Phone || '--' }}
                                </view>
                            </view>
                            <view class="address_cell" v-if="item.Delivery_Address">
                                <view class="icon"></view>
                                <view class="lit">
                                    <text v-if="item.Delivery_Province">{{ item.Delivery_Province }}</text>
                                    <text v-if="item.Delivery_City">{{ item.Delivery_City }}</text>
                                    <text v-if="item.Delivery_Address">{{ item.Delivery_Address }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="border" v-for="(el, i) in item.Item" :key="i">
                            <view class="single_img">
                                <image :src="imgeone(el.ProductImg)" mode="aspectFill"></image>
                            </view>
                            <view class="single_right">
                                <view class="single_title">
                                    <view class="single_title_text hiddenText">
                                        {{ el.ProductName || '--' }}
                                    </view>
                                </view>

                                <view class="single_tabs">
                                    <view class="single_tab" v-for="(tag, index) in tagsArray" :key="index">{{ tag }}
                                    </view>
                                </view>
                                <view class="single_spec">
                                    <view class="single_style">
                                        {{ el.Style || '--' }}
                                    </view>
                                    <view class="single_style">数量：{{ el.Qty || '--' }}</view>
                                </view>
                                <view class="single_bottom">
                                    <view class="single_price">
                                        <view class="dollor">￥</view>
                                        {{ item.Price || '--' }}
                                    </view>
                                    <!-- <view class="user_send" v-if="item.OrderType=='赠送订单'">
										<view class="head">
											<image :src="item.SenderHeadImgUrl || 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722996894207462.png'" mode="aspectFill"></image>
										</view>
										<view class="name">
											{{item.SenderName || '--'}}赠送
										</view>
									</view> -->
                                </view>
                            </view>
                        </view>
                        <!-- <view class="time">
							订单时间：{{$util.formatDateTime(item.OrderTime)}}
						</view> -->
                        <view class="single_btn" v-if="item.Status == 1">
                            <view class="btn_cell">
                                填写快递单号
                            </view>
                        </view>
                    </view>

                </view>
                <view style="height: 50rpx;"></view>
            </block>
            <block v-else>
                <EmptyBox text="还没订单哦"></EmptyBox>
            </block>
        </block>
    </view>
</template>

<script>
import color from 'uview-ui/libs/config/color';

export default {
    data() {
        return {
            load: false, //是否加载
            PageIndex: 1, //页码
            PageSize: 30,
            orderList: [], //商品列表
            isMore: true, //是否还有更多
            tabList: [
                //顶部状态选择
                {
                    label: '全部',
                    value: 99,
                    count: 0
                },
                {
                    label: '待发货',
                    value: 1,
                    count: 0
                },
                {
                    label: '派送中',
                    value: 3,
                    count: 0
                },
                {
                    label: '已完成',
                    value: 4,
                    count: 0
                },
                {
                    label: '已退货',
                    value: -2,
                    count: 0
                },
            ],
            nowIndex: 99, //当前选中状态

            searchValue: '',
            yearMonth: '',
        };
    },

    computed: {},
    watch: {},

    onReady() { },

    async onLoad(e) {
        this.yearMonth = e.yearMonth
        uni.setNavigationBarTitle({
            title: e.yearMonth+'月订单列表'
        });
        this.getList();
        this.getMyCount()
    },
    onUnload() {

    },

    methods: {
        searchCustomers(e) {
            this.$util.debounce(() => {
                this.searchValue = e.detail.value.replace(/\s+/g, "")
                this.PageIndex = 1
                this.getList({ Keywords: this.searchValue });
                this.getMyCount()
            }, 300)
        },
        async getMyCount() {
            for (var i = 0; i < this.tabList.length; i++) {
                if (i == 1 || i == 2) {
                    this.tabList[i].count = await this.getUnread(this.tabList[i].value)
                }
            }
        },
        async getUnread(Status) {
            let res = await this.$api.post('/Order/MyShopOrders', {
                PageIndex: 1,
                PageSize: 999,
                Status
            })

            return res.data ? res.data.length : 0
        },
        getStoreStatus(s) {
            return s == -2 ? '已退货' : s == 1 ? '待发货' : s == 3 ? '派送中' : s == 4 ? '已完成' : ''
        },
        imgeone(img) {
            return img.split(',')[0];
        },
        // 获取商品列表
        async getList(params = {}) {
            const res = await this.$api.post('/Order/MonthShopOrders', {
                PageIndex: this.PageIndex, // 页码
                PageSize: this.PageSize, // 一页数量
                Status: this.nowIndex,
                SaleMonth: this.yearMonth,
                ...params
            });

            if (res.code == 0) {
                this.orderList = this.PageIndex == 1 ? res.data : this.orderList.concat(res.data);
                this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
                this.load = true;
            } else if (res.code == 100) {
                this.orderList = []
                this.load = true;
            } else {
                this.$pv.msg(res.message)
            }


        },
        // 选择Tab
        chooseTab(value) {
            this.nowIndex = value;
            this.PageIndex = 1;
            this.getList();
        },
        async exportFile() {
            if (!this.orderList.length) {
                this.$pv.msg('暂无可导出的订单')
                return
            }
            let res = await this.$api.post('/Order/MonthShopOrdersExport', { SaleMonth: this.yearMonth })
            if (res.code == 0) {
                uni.downloadFile({
                    url: res.data,
                    success: (res) => {
                        if (res.statusCode === 200) {
                            let filePath = res.tempFilePath
                            uni.openDocument({
                                filePath,
                                showMenu: true,
                                success: res => {
                                    console.log(res);
                                },
                                fail: err => {
                                    this.$pv.msg(err) //失败
                                }
                            })
                        }
                    },
                    fail: (err) => {
                        this.$pv.msg(err) //失败
                    }
                })

            } else if (res.code == 100) {
                this.$pv.msg(res.message)
            }
        },
        importFile() {
            this.nav_to('/pages/store/import')
            // uni.chooseMessageFile({
            // 	count:1,
            // 	type:'file',
            // 	success:(res)=>{
            // 		console.log(res);

            // 	}
            // })
        },
        uploadFun(url) {
            this.$pv.load('正在上传');
            this.$upload(url, () => { })
            this.$pv.closeLoad()
        }
    },

    onReachBottom() {
        if (this.isMore) {
            this.PageIndex++;
            this.getList();
        }
    },
};
</script>

<style lang="scss">
page {
    // height: 100%;
    background: #f6f6f6;
}

.gift {
    display: flex;
    flex-direction: column;
    align-items: center;

    // padding-top: 240rpx;
    .navBox {
        // position: fixed;
        // top: 88rpx;
        width: 100%;
        padding: 14rpx 20rpx;
        background-color: #f6f6f6;
        box-shadow: 0 0 8rpx #ccc;

        .sign_nav {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 24rpx;
            background: #FFFFFF;
            border-radius: 16rpx;

            .nav_cell {
                flex: 1;
                // width: 50%;
                padding: 14rpx 0;
                display: flex;
                align-content: center;
                justify-content: center;

                .icon {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 8rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .tit {
                    font-size: 28rpx;
                    color: #333333;
                }
            }

            .nav_line {
                width: 2rpx;
                height: 42rpx;
                background-color: #C2C2C2;
            }

        }
    }


    .item {
        // margin: 30rpx 0;

        .single {
            width: 700rpx;
            // height: 252rpx;
            padding: 20rpx;
            margin-bottom: 20rpx;
            background: #fff;
            border-radius: 16rpx;
            overflow: hidden;

            .single_titbox {
                display: flex;
                align-items: center;
                justify-content: space-between;

                // margin-top: 20rpx;
                .titbox_tit {
                    font-size: 32rpx;
                    color: #333333;
                }

                .titbox_status {
                    font-size: 28rpx;
                    color: #5d8bf8;
                }
            }

            .address {
                margin-top: 20rpx;
                background: #F6F6F6;
                border-radius: 16rpx;
                padding: 24rpx;

                .address_cell {
                    display: flex;
                    align-items: center;

                    .icon {
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 8rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .name {
                        font-weight: bold;
                        font-size: 32rpx;
                    }

                    .lit {
                        width: 92%;
                        margin-top: 16rpx;
                        font-size: 24rpx;
                        color: #666666;

                        text {
                            font-size: 24rpx;
                            color: #666666;
                        }
                    }
                }
            }

            .time {
                color: #999;
                font-size: 26rpx;
                padding-bottom: 20rpx;
            }

            .single_btn {
                margin-top: 4rpx;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .btn_cell {
                    font-size: 28rpx;
                    color: #FFFFFF;
                    padding: 16rpx 32rpx;
                    background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
                    border-radius: 36rpx;
                }
            }

            .border {
                display: flex;
                align-items: center;
                // border-bottom: 1rpx solid #E4E4E4;
                padding: 20rpx 0;

                .single_img {
                    width: 204rpx;
                    height: 204rpx;
                    margin-right: 10rpx;
                    border-radius: 8rpx;
                    overflow: hidden;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .single_right {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex: 1;
                    margin-left: 10rpx;
                    /* margin: 0 5rpx 0 10rpx; */
                    min-height: 200rpx;

                    .single_title {
                        width: 100%;
                        display: flex;
                        align-items: center;

                        .single_title_text {
                            width: 430rpx;
                            font-weight: bold;
                            font-size: 28rpx;
                            color: #333333;
                        }

                        .single_title_state {
                            flex: 1;
                            font-weight: 500;
                            font-size: 28rpx;
                            color: #5d8bf8;
                        }
                    }

                    .single_tabs {
                        display: flex;
                        margin: 10rpx 0 10rpx -5rpx;

                        .single_tab {
                            width: 104rpx;
                            height: 36rpx;
                            border-radius: 8rpx;
                            border: 1rpx solid #f91c1c;
                            font-size: 20rpx;
                            color: #f91c1c;
                            margin: 0 5rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }

                    .single_spec {
                        font-size: 26rpx;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 24rpx;

                        .single_style {
                            font-weight: 500;
                            font-size: 24rpx;
                            color: #5d8bf8;
                            // color: #999999;
                        }
                    }

                    .single_bottom {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .single_price {
                            font-weight: bold;
                            font-size: 42rpx;
                            color: #333333;
                            display: flex;
                            align-items: baseline;

                            .dollor {
                                font-weight: bold;
                                font-size: 24rpx;
                                color: #333333;
                            }
                        }

                        .user_send {
                            display: flex;
                            align-items: center;

                            .head {
                                width: 40rpx;
                                height: 40rpx;
                                margin-right: 8rpx;
                                border-radius: 50%;

                                image {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            .name {
                                font-size: 28rpx;
                                color: #999999;
                            }
                        }
                    }
                }
            }

            .border:last-child {
                border-bottom: none;
            }
        }
    }
}

.topBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ffffff;

    .head1 {
        width: 100%;
        height: 98rpx;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        // position: fixed;
        // top: 0;
        // left: 0;
        box-shadow: 0 0 8rpx #ccc;

        .searchBox {
            width: 93%;
            height: 72rpx;
            background: #F6F6F6;
            border-radius: 36rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 28rpx;
            color: #666666;

            image {
                width: 32rpx;
                height: 32rpx;
                margin: 0 10rpx 0 20rpx;
            }

            input {
                width: 80%;
            }
        }
    }

    .topList {
        width: 100%;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .topCell {
            font-weight: 500;
            font-size: 28rpx;
            color: #666666;
            position: relative;
        }

        .topCellIng {
            position: relative;
            color: #5d8bf8;

            &::before {
                position: absolute;
                content: '';
                left: 0;
                bottom: -18rpx;
                width: 100%;
                height: 6rpx;
                background: #5d8bf8;
                border-radius: 5rpx;
            }
        }

        .unReadNum {
            max-width: 48rpx;
            min-width: 32rpx;
            height: 32rpx;
            position: absolute;
            right: -30rpx;
            top: -10rpx;
            font-size: 22rpx;
            background-color: #FC201C;
            color: white;
            padding: 5rpx;
            border-radius: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
